<template>
    <div class="wrapper">
        <div class="main_box">
            <!-- 可以使用 CellGroup 作为容器 -->
            <van-cell-group inset>
                <van-field v-model="templateName" label-width="100" label="模板名称" placeholder="请输入模板名称"
                    input-align="right" :border="false" />
                <div class="dia">
                    <van-field v-model="creditCardDrate" label-width="140" label="信用卡成本" placeholder="请输入信用卡成本"
                        input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        %
                    </div>
                </div>
                <!-- <van-field v-model="debitCardDrate" label-width="140" label="借记卡T0费率(%)" placeholder="请输入借记卡T0费率"
					input-align="right" :border="false" /> -->
                <!-- <van-field v-model="dcardCap" label-width="140" label="借记卡封顶(元)" placeholder="请输入借记卡封顶"
					input-align="right" :border="false" /> -->
                <div class="dia">
                    <van-field v-model="ysfRate" label-width="140" label="闪付" placeholder="请输入闪付" input-align="right"
                        :border="false" />
                    <div class="" style="margin-right: 12px;">
                        %
                    </div>
                </div>
                <div class="dia">
                    <van-field v-model="largeZfbRate" label-width="140" label="支付宝大额" placeholder="请输入支付宝大额"
                        input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        %
                    </div>
                </div>
                <div class="dia">
                    <van-field v-model="casRate" label-width="140" label="刷卡D0成本" type="digit" placeholder="请输入刷卡D0成本"
                        input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
                <div class="dia">
                    <van-field v-model="withdrawRateCost" label-width="140" label="提现费率成本" type="digit"
                        placeholder="请输入提现费率成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        %
                    </div>
                </div>
                <div class="dia">
                    <van-field v-model="firstSimCost" label-width="140" label="电签首次流量卡成本" type="digit"
                        placeholder="请输入电签首次流量卡成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
                <div class="dis" v-if="dqRepeShowStatus==0">
                    <van-field v-model="repeSimStatusName" label="电签是否开启多次流量卡" input-align="right" placeholder="请选择"
                        :disabled="true" :clickable="true" :is-link="true" @click="torchlight()" label-width="160" />
                </div>
                <div class="dia" v-if="repeSimStatus==0&&dqRepeShowStatus==0">

                    <van-field v-model="repeSimCost" label-width="140" label="电签多次流量卡成本" type="digit"
                        placeholder="请输入电签多次流量卡成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>

                <div class="dia">
                    <van-field v-model="djFirstSimCost" label-width="140" label="大机首次流量卡成本" type="digit"
                        placeholder="请输入大机首次流量卡成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
                <div class="dis" v-if="djRepeShowStatus==0">
                    <van-field v-model="djRepeShowStatusName" label="大机是否开启多次流量卡" input-align="right" placeholder="请选择"
                        :disabled="true" :clickable="true" :is-link="true" @click="generator()" label-width="160" />
                </div>
                <div class="dia" v-if="djRepeSimStatus==0 && djRepeShowStatus==0">
                    <van-field v-model="djRepeSimCost" label-width="140" label="大机多次流量卡成本" type="digit"
                        placeholder="请输入大机多次流量卡成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
                <div class="dia">
                    <van-field v-model="miFirstSimCost" label-width="140" label="微智能首次流量卡成本" type="digit"
                        placeholder="请输入微智能首次流量卡成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
                <div class="dis" v-if="miRepeShowStatus==0">
                    <van-field v-model="intellectName" label="微智能是否开启多次流量卡" input-align="right" placeholder="请选择"
                        :disabled="true" :clickable="true" :is-link="true" @click="intellect()" label-width="180" />
                </div>
                <div class="dia" v-if="miRepeShowStatus==0 && miRepeSimStatus==0">
                    <van-field v-model="miRepeSimCost" label-width="140" label="微智能多次流量卡成本" type="digit"
                        placeholder="请输入微智能多次流量卡成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
                <div class="dia">
                    <van-field v-model="depositCost" label-width="140" label="押金成本" type="digit" placeholder="请输入押金成本"
                        input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
                <van-field v-model="ccardTrateYx" label-width="140" label="优惠贷记卡成本(%)" placeholder="请输入优惠贷记卡成本"
                    input-align="right" :border="false" />
                <div class="custom-field--disabled" @click="righticon">
                    <van-field v-model="settle" label-width="140" label="是否结算" placeholder="请选择是否结算" input-align="right"
                        :border="false" right-icon="arrow" :disabled="isDisabled" @click-right-icon.stop="righticon"
                        @click.stop="righticon" @click-input.stop="righticon" readonly />
                    <div v-if="isDisabled" class="overlay" @click="righticon"></div>
                </div>
                <div class="dia">
                    <van-field v-model="qrSfRate" label-width="140" label="聚合扫码成本"  placeholder="请输入聚合扫码成本"
                        input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        %
                    </div>
                </div>
                <div class="dia">
                    <van-field v-model="qrCasRate" label-width="140" label="聚合扫码出款成本" type="digit"
                        placeholder="请输入聚合扫码出款成本" input-align="right" :border="false" />
                    <div class="" style="margin-right: 12px;">
                        元
                    </div>
                </div>
            </van-cell-group>
        </div>
        <div class="dis" v-for="(item,index) in agentTemplateSubsidyRateList" :key="index"
            style="justify-content: center;">
            <van-swipe-cell style="padding-bottom: 4px;box-sizing: border-box;">
                <div class="main_box" style="margin-top: 20px;margin-left: 2px;">

                    <van-cell-group inset>
                        <van-field v-model="item.subsidyPeriod" label-width="100" type="digit" label="补贴周期(天)"
                            placeholder="请输入补贴周期" input-align="right" :border="false" />
                        <van-field v-model="item.subsidyRate" label-width="140" label="补贴费率(%)" placeholder="请输入补贴费率"
                            input-align="right" :border="false" />
                    </van-cell-group>

                </div>
                <template #right>
                    <van-button square type="danger" text="删除" style="height: 100%;"
                        @click="beforeClose(item,index )" />

                </template>


            </van-swipe-cell>
        </div>


        <div class="dis">
            <div class="allowance" @click="benefit">
                <div class="dis">
                    <div class="dis">
                        <img src="/src/assets/terminal/addition.png" alt="" />
                    </div>
                    <div class="collocate">
                        添加津贴配置
                    </div>
                </div>
            </div>
        </div>
        <div class="dis">
            <div class="btn_box">
                <div class="btn dis" @click="subment">
                    确定
                </div>
            </div>
        </div>
        <van-popup v-model:show="show" destroy-on-close round position="bottom">
            <van-picker v-model="settleList" :clickable="true" :is-link="true" :columns="columns" @cancel="show = false"
                @confirm="onConfirm" />
        </van-popup>
        <!-- //是否展示电签多次流量卡 -->
        <van-overlay :show="isshow" @click="isshow = false">
            <div class="wrapper_show">
                <van-picker title="" :columns="columns" @confirm="visaConfirm" @cancel="onCancel" />
            </div>
        </van-overlay>
        <!-- //是否展示大机多次流量卡 -->
        <van-overlay :show="generatorShow" @click="generatorShow = false">
            <div class="wrapper_show">
                <van-picker title="" :columns="columnsA" @confirm="generatorConfirm" @cancel="generatorCancel" />
            </div>
        </van-overlay>
        <!-- //是否展示微智能多次流量卡 -->
        <van-overlay :show="intellectShow" @click="intellectShow = false">
            <div class="wrapper_show">
                <van-picker title="" :columns="columns" @confirm="intellectConfirm" @cancel="intellectCancel" />
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import {
        insertAgentTemplatePosChannelRate,
        selectAgentTemplatePosChannelRateById,
        updateAgentTemplatePosChannelRate,
        selectAgentCanShow
    } from '@/api/terminal'
    import store from '@/store'
    import {
        showToast,
        showConfirmDialog,
        SwipeCell
    } from 'vant'
    import {
        useRoute,
        useRouter,
        RouterView
    } from 'vue-router'
    import {
        defineComponent,
        reactive,
        toRefs,
        ref,
        onMounted
    } from 'vue';
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRouter()
            const routers = useRoute()
            const state = reactive({
                benefitIndex: 0,
                columns: [{
                        text: '是',
                        value: '0'
                    },
                    {
                        text: '否',
                        value: '1'
                    }
                ],
                columnsA: [{
                        text: '是',
                        value: '0'
                    },
                    {
                        text: '否',
                        value: '1'
                    }
                ],
                show: false,
                settle: "",
                settleList: [],
                isDisabled: true,
                agentTemplateSubsidyRateList: [{
                    subsidyPeriod: "",
                    subsidyRate: ""
                }],
                dqRepeShowStatus: "",
                djRepeShowStatus: "",
                repeSimStatusName: "",
                show: false,
                isshow: false,
                djRepeShowStatusName: "",
                generatorShow: false,
                intellectShow: false,
                intellectName: "",
                miRepeShowStatus: "",
            })
            const info = reactive({
                templateName: "",
                creditCardDrate: "",
                debitCardDrate: "",
                dcardCap: "35",
                ysfRate: "",
                largeZfbRate: "",
                casRate: "",
                withdrawRateCost: "",
                ccardTrateYx: "",
                settlementStatus: '',
                agentTemplateSubsidyRateListStr: [],
                configId: "",
                repeSimCost: "",
                firstSimCost: "",
                repeSimStatus: "",
                djFirstSimCost: "",
                djRepeSimStatus: "",
                djRepeSimCost: "",
                miFirstSimCost: "",
                miRepeSimCost: "",
                miRepeSimStatus: "",
                depositCost: "",
                qrSfRate: "",
                qrCasRate: ""
            })
            // 大机取消多次流量卡选择
            const generatorCancel = () => {
                state.generatorShow = false
            }
            // 大机选择多次流量卡选择
            const generatorConfirm = ({
                selectedValues
            }) => {
                // showToast(`当前值: ${selectedValues.join(',')}`);
                info.djRepeSimStatus = selectedValues.join(',')
                if (info.djRepeSimStatus == 0) {
                    state.djRepeShowStatusName = '是'
                } else {
                    state.djRepeShowStatusName = '否'
                }
            };
            //微智能选择
            const intellect = () => {
                state.intellectShow = true
            }
            //微智能选择
            const intellectCancel = () => {
                state.intellectShow = false
            }
            //微只能是否有多次
            const intellectConfirm = ({
                selectedValues
            }) => {
                // showToast(`当前值: ${selectedValues.join(',')}`);
                info.miRepeSimStatus = selectedValues.join(',')
                console.log(info.miRepeSimStatus)
                if (info.miRepeSimStatus == 0) {
                    state.intellectName = '是'
                } else {
                    state.intellectName = '否'
                }
                state.intellectShow = false
            };
            // 显示大机多次流量卡成本
            const generator = () => {
                state.generatorShow = true
            }
            // 显示电签多次流量卡成本
            const torchlight = () => {
                state.isshow = true
            }
            // 电签选择多次流量卡成本
            const visaConfirm = ({
                selectedValues
            }) => {
                // showToast(`当前值: ${selectedValues.join(',')}`);
                info.repeSimStatus = selectedValues.join(',')
                if (info.repeSimStatus == 0) {
                    state.repeSimStatusName = '是'
                } else {
                    state.repeSimStatusName = '否'
                }
            };
            // 取消电签选择多次流量卡成本
            const onCancel = () => {
                state.isshow = false
            }
            // 新增模板查询是否有二次流量卡选项
            const gteselectAgentCanShow = () => {
                let parames = {}
                selectAgentCanShow(parames).then(res => {
                    console.log(res)
                    state.djRepeShowStatus = res.data.djRepeShowStatus
                    if (state.djRepeShowStatus == 0) {
                        // state.djRepeShowStatusName = '是'
                        info.djRepeSimStatus = 0
                    } else {
                        // state.djRepeShowStatusName = '否'
                        info.djRepeSimStatus = 1
                    }
                    state.dqRepeShowStatus = res.data.dqRepeShowStatus
                    if (state.dqRepeShowStatus == 0) {
                        // state.repeSimStatusName = '是'
                        info.repeSimStatus = 0
                    } else {
                        // state.repeSimStatusName = '否'
                        info.repeSimStatus = 1
                    }
                    state.miRepeShowStatus = res.data.miRepeShowStatus
                    if (state.miRepeShowStatus == 0) {
                        // state.repeSimStatusName = '是'
                        info.miRepeSimStatus = 0
                    } else {
                        // state.repeSimStatusName = '否'
                        info.miRepeSimStatus = 1
                    }
                })
            }
            if (routers.query.type == 1) {
                gteselectAgentCanShow()
            }
            //校验空值
            const validateForm = (info) => {
                const errors = [];

                if (!info.templateName) errors.push('模板名称不能为空');
                if (!info.creditCardDrate) errors.push('信用卡成本不能为空');
                // if (!info.debitCardDrate) errors.push('借记卡T0费率不能为空');
                // if (!info.dcardCap) errors.push('借记卡封顶不能为空');
                if (!info.ysfRate) errors.push('闪付不能为空');
                if (!info.largeZfbRate) errors.push('支付宝大额不能为空');
                if (!info.casRate) errors.push('刷卡D0成本不能为空');
                if (!info.withdrawRateCost) errors.push('提现费率成本不能为空');
                if (!info.ccardTrateYx) errors.push('优惠贷记卡成本不能为空');
                if (!info.miFirstSimCost) errors.push('微智能首次流量卡成本不能为空');
                if (info.miRepeSimStatus == 0) {
                    if (!info.miRepeSimCost) errors.push('微智能多次流量卡成本不能为空');
                }
                if (info.repeSimStatus == 0) {
                    if (!info.repeSimCost) errors.push('电签多次流量卡成本不能为空');
                }
                if (info.djRepeSimStatus == 0) {
                    if (!info.djRepeSimCost) errors.push('大机多次流量卡成本不能为空');
                }
                if (!info.firstSimCost) errors.push('首次流量卡成本不能为空');
                if (!info.depositCost) errors.push('押金成本不能为空');
                if (!info.qrSfRate) errors.push('聚合扫码成本不能为空');
                if (!info.qrCasRate) errors.push('聚合扫码出款成本不能为空');
                if (info.settlementStatus === '') errors.push('是否结算不能为空'); // 注意这里，我们只检查是否为空字符串

                // 检查子列表中的字段
                state.agentTemplateSubsidyRateList.forEach((item, index) => {
                    if (!item.subsidyPeriod) errors.push(`补贴周期不能为空`);
                    if (!item.subsidyRate) errors.push(`补贴费率不能为空`);
                });

                return errors;
            };
            //提交
            const subment = () => {
                const errors = validateForm(info);
                if (errors.length > 0) {
                    showToast(errors[0])
                    return
                }
                info.agentTemplateSubsidyRateListStr = JSON.stringify(state.agentTemplateSubsidyRateList)
                info.dcardCap = info.creditCardDrate
                // info.ccardTrateYx = info.creditCardDrate
                info.debitCardDrate = info.creditCardDrate
                if (routers.query.type == 1) {
                    insertAgentTemplatePosChannelRate(info).then(res => {
                        showToast('新增成功')
                        setTimeout(() => {
                            router.go(-1)
                        }, 1000)
                    })
                } else {
                    console.log(info)
                    updateAgentTemplatePosChannelRate(info).then(res => {
                        showToast('修改成功')
                        setTimeout(() => {
                            router.go(-1)
                        }, 1000)

                    }).catch(err => {
                        detail()
                        gteselectAgentCanShow()

                    })
                }

            }
            //点击右侧按钮
            const righticon = () => {
                state.show = true
            }
            //点击删除按钮
            const beforeClose = (item, index) => {
                console.log(item)
                state.agentTemplateSubsidyRateList.splice(index, 1)
            };
            //点击确认
            const onConfirm = (e) => {
                console.log(e)
                info.settlementStatus = e.selectedOptions[0].value
                state.settle = e.selectedOptions[0].text
                state.show = false
            }
            //添加津贴
            const benefit = () => {
                // state.benefitIndex++
                console.log(state.agentTemplateSubsidyRateList)
                state.agentTemplateSubsidyRateList.push({
                    subsidyPeriod: "",
                    subsidyRate: ""
                })
            }
            const detail = () => {
                let parames = {
                    configId: routers.query.configId
                }
                selectAgentTemplatePosChannelRateById(parames).then(res => {
                    // info = res.data
                    state.djRepeShowStatus = res.data.djRepeShowStatus
                    info.djRepeSimStatus = res.data.djRepeSimStatus
                    if (info.djRepeSimStatus == 0) {
                        state.djRepeShowStatusName = '是'
                    } else {
                        state.djRepeShowStatusName = '否'
                    }
                    state.dqRepeShowStatus = res.data.dqRepeShowStatus
                    info.repeSimStatus = res.data.repeSimStatus
                    if (info.repeSimStatus == 0) {
                        state.repeSimStatusName = '是'
                    } else {
                        state.repeSimStatusName = '否'
                    }
                    info.miRepeSimStatus = res.data.miRepeSimStatus
                    if (info.miRepeSimStatus == 0) {
                        state.intellectName = '是'
                    } else {
                        state.intellectName = '否'
                    }
                    for (let i in res.data) {
                        for (let k in info) {
                            if (i == k) {
                                info[k] = res.data[i]
                            }
                            if (i == 'settlementStatus') {
                                if (res.data[i] == 0) {
                                    state.settle = '是'
                                } else {
                                    state.settle = '否'
                                }

                            }
                        }

                    }
                    if (res.data.agentTemplateSubsidyRateList == null) {
                        state.agentTemplateSubsidyRateList = []
                        return
                    }
                    state.agentTemplateSubsidyRateList = res.data.agentTemplateSubsidyRateList
                    for (let j in res.data.agentTemplateSubsidyRateList.length - 1) {
                        state.agentTemplateSubsidyRateList.push({
                            subsidyPeriod: "",
                            subsidyRate: ""
                        })
                    }
                    for (let i in res.data.agentTemplateSubsidyRateList) {
                        for (let k in state.agentTemplateSubsidyRateList) {
                            if (i == k) {
                                state.agentTemplateSubsidyRateList[k] = res.data
                                    .agentTemplateSubsidyRateList[i]
                            }
                        }
                    }
                })
            }
            if (routers.query.type == 2) {
                detail()
            }
            return {
                ...toRefs(state),
                ...toRefs(info),
                benefit,
                beforeClose,
                subment,
                righticon,
                onConfirm,
                validateForm,
                detail,
                gteselectAgentCanShow,
                visaConfirm,
                torchlight,
                onCancel,
                generator,
                generatorCancel,
                generatorConfirm,
                intellectConfirm,
                intellectCancel,
                intellect
            }
        }
    })
</script>
<style scoped lang="scss">
    .wrapper {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        background-color: #fff;
        padding: 12px 18px 18px 18px;
        box-sizing: border-box;

        .main_box {
            border-radius: 6px 6px 6px 6px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            padding: 5px 0px;
            box-sizing: border-box;
            width: 98%;

            .overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                /* 确保覆盖层在输入框之上 */
            }
        }

        .allowance {
            border-radius: 6px 6px 6px 6px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FF2828;
            width: 100%;
            padding: 8px 0px;
            box-sizing: border-box;
            margin-top: 10px;

            .collocate {
                margin-left: 4px;
            }

            img {
                width: 16px;
                height: 16px;
            }
        }

        ::v-deep .van-cell-group {
            margin: 0px !important;
        }

        ::v-deep .van-field__label {
            color: #333 !important;
        }

        .btn_box {
            // position: absolute;
            // bottom: 10%;
            // left: 50%;
            // transform: translateX(-50%);
            margin-top: 24px;

            .btn {
                width: 339px;
                height: 40px;
                background: #FF2828;
                border-radius: 6px 6px 6px 6px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #FFFFFF;
            }
        }

        .wrapper_show {
            position: absolute;
            bottom: 0px;
            width: 100%;
        }

        ::v-deep .van-field__control:disabled {
            color: #333 !important;
        }

        .custom-field--disabled {
            cursor: not-allowed;
            position: relative;
        }

        .custom-field--disabled .van-field__control {
            pointer-events: none;
            /* 禁用输入框的点击事件 */
        }
    }
</style>